<template>
	<view>
		<view class="integral-tab">
			<view @click="goTab(0)" :class="tabIndex===0?'tab-active':''">收入</view>
			<view @click="goTab(1)" :class="tabIndex===1?'tab-active':''">支出</view>
		</view>
		<view class="integral-list" v-for="item in list">
			<integralItem :item="item"></integralItem>
		</view>
		<view class="no-data" v-if="list.length===0">
			<image src="https://www.innovationgloble.com/wxs/img/wx/integral_no_data.png" mode="widthFix"></image>
			<view class="no-data-text">暂无相关数据</view>
		</view>
		<view class="sysBottomShow" v-if="isLastPage&&list.length>=5" style="background: #f5f6f9;">
			我是有底线的
		</view>
	</view>
</template>

<script>
	import integralItem from '../../components/page-componnet/integral-item.vue'
	export default {
		data() {
			return {
				tabIndex:0,
				list: [],
				pageNum:1,
				isLastPage:false
			};
		},
		components:{
			integralItem
		},
		onLoad() {
			this.loadIncome();
		},
		onPullDownRefresh() {
			this.isLastPage = false
			this.list = []
			this.pageNum = 1
			if(this.tabIndex === 0){
				this.loadIncome('收入');
			}
			else{
				this.expenditure('支出');
			}
		},
		onReachBottom() {
			if (!this.isLastPage) {
				this.pageNum += 1;
			if(this.tabIndex === 0){
				this.loadIncome('收入');
			}
			else{
				this.expenditure('支出');
			}
			}
		},
		methods:{
			goTab(index){
				this.tabIndex = index;
				this.isLastPage = false
				this.list = []
				this.pageNum = 1
				if(index === 0){
					this.loadIncome('收入');
				}
				else{
					this.expenditure('支出');
				}
			},
			loadIncome(income='收入'){
				uni.showLoading({
					title:'加载中'
				})
				this.$request.get({
					url:'UserIntegralHistory/selectUserIntegralHistorForMe',
				    data:{
						pageSize:10,
						pageNumber: this.pageNum,
						income
					}
				}).then(res=>{
					uni.hideLoading()
					uni.stopPullDownRefresh();
					this.isLastPage = res.isLastPage 
					this.list =this.list.concat(res.list);
				})
			},
			//获取积分
			expenditure(expenditure='收入'){
				uni.showLoading({
					title:'加载中'
				})
				this.$request.get({
					url:'UserIntegralHistory/selectUserIntegralHistorForMe',
				    data:{
						pageSize:10,
						pageNumber: this.pageNum,
						expenditure
					}
				}).then(res=>{
					uni.hideLoading()
					uni.stopPullDownRefresh();
					this.isLastPage = res.isLastPage 
					this.list =this.list.concat(res.list);
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
 .integral-tab {
	 display: flex;
	 justify-content: center;
	 border-bottom: 1upx solid #DCDDDC;
	 view {
		 font-size:30upx;
		 font-family:PingFangSC-Medium,PingFang SC;
		 font-weight:500;
		 color:rgba(51,51,51,1);
		 line-height: 88upx;
	 }
	 view:nth-child(1){
		 box-sizing: border-box;
		 margin-right: 49upx;
	 }
	 view:nth-child(2){
	 		 box-sizing: border-box;
	 		 margin-left: 49upx;
	 }
	 .tab-active{
		 color:rgba(42,125,250,1);
		 position: relative;
		 &::after{
			 content: '';
			 display: block;
			 position: absolute;
			 width:60upx;
			 height:6upx;
			 background:rgba(42,125,250,1);
			 border-radius:3upx;
			 bottom: 0;
			 left: 50%;
			 transform: translateX(-50%);
		 }
	 }
 }
 .no-data{
	 text-align: center;
 	image{
 		width: 374upx;
		margin: 0 auto;
		position: relative;
		margin-top: 80upx;
		.no-data-text {
			font-size:26upx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
			line-height:37upx;
			text-align: center;
		}
 	}
 }
</style>
